<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="字典名称">
        <el-input v-model="queryParams.dictName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="字典编码">
        <el-input v-model="queryParams.dictCode" placeholder="IP"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table border :data="tableList">
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        label="账号"
        prop="dictName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="昵称"
        prop="dictCode"
        align="center"
      ></el-table-column>
      <el-table-column
        label="性别"
        prop="description"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="邮箱"
        prop="createTime"
        align="center"
      ></el-table-column>
       <el-table-column
        label="头像"
        prop="createTime"
        align="center"
      ></el-table-column>
       <el-table-column
        label="联系方式"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" prop="flag" align="center">
        <template slot-scope="scope">
          {{ scope.row.flag }}
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="costTime" align="center">
        <template slot-scope="scope">
          <el-link
            :underline="false"
            @click="drawer = true"
            icon="el-icon-setting"
            type="primary"
            >配置字典项</el-link
          >
          <el-link :underline="false" type="primary">修改</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next"
        :total="queryParams.total"
      >
      </el-pagination>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="saveModel" :model="saveModel" label-width="80px">
        <el-form-item label="字典名称">
          <el-input v-model="saveModel.dictName"></el-input>
        </el-form-item>
        <el-form-item label="字典编码">
          <el-input v-model="saveModel.dictCode"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="saveModel.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDict()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置菜单项 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import { dict } from '../../api/dict'
export default {
  data() {
    return {
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      dialogVisible: false,
      saveModel: {},
      tableList: [],
      drawer: false
    }
  },
  methods: {
    handleAdd() {
      this.dialogVisible = true
    },
    addDict() {
      dict.add(this.saveModel).then((res) => {
        this.dialogVisible = false

        this.queryPage()
        this.$$refs['saveModel'].resetField()
      })
    },
    queryPage() {
      dict.queryPage(this.queryParams).then((res) => {
        this.queryParams.pageSize = res.pageSize
        this.queryParams.total = res.total
        this.tableList = res.list
      })
    },
    handleCurrentChange(event) {
      this.queryParams.pageNum = event
      this.queryPage()
    },
    search() {
      this.queryPage()
    },
    handleClose() {}
  },
  created() {
    this.queryPage()
  }
}
</script>

<style></style>
